<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="thx" uri="/thx-tags"%>

	<style>
		.edit_table .form-group {
			margin-right: 0px;
			margin-left: 0px;
		}
	</style>
	<div class="modal-body edit_table">
		<div class="row">
			<div class="form-group" style="padding-left:15px;padding-right:15px;">
				<label>表格预览</label>
				<div id="table_preView" style="width:100%;height:auto!important;height:60px;min-height:60px">
				</div>
			</div>
		</div>
		<div class="row">
			<div class="form-group col-sm-6">
				<label>表格行数</label> 
				<input type="text" id="table_row" value="1" class="form-control"
					placeholder="输入表格行数" />
			</div>
			<div class="form-group col-sm-6">
				<label>表格列数</label> 
				<input type="text" id="table_col" value="1" class="form-control"
					placeholder="输入表格列数" />
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-default" id="submit_cancel" data-dismiss="modal">取消</button>
		<button type="button" class="btn btn-primary" id="submit_table" >确定</button>
	</div>
	<script>
		$(function() {
			function creatTable(row, col){
				$("#table_preView").empty();
				var tableTemp = '<table style="width:100%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#000000"></table>';
				$("#table_preView").append(tableTemp);
				var tableRow;
				for(var r = 0; r < row; r++){
					tableRow = '<tr>';
					for(var c = 0; c < col; c++){
						tableRow += '<th>&nbsp;</th>';
					}
					tableRow += '</tr>';
					$("#table_preView>table").append(tableRow);
				}
			}
			$("#table_row,#table_col").bind("keyup",function(){
				var reg = new RegExp("^[0-9]*$");
				if(!reg.test(this.value)){  
					dialog.alert("请输入数字!"); 
			    }else{
					creatTable($("#table_row").val(), $("#table_col").val());
			    }
			});
			creatTable(1,1);
			$("#submit_table").click(function(){
				$("#formTempDiv").html($("#table_preView").html());
				$('#formTempDiv').find("tr>th").droppable({
					accept: ".divclass",
					drop: function(event, ui) {
						$(this).html($(ui.draggable).html());
					}
				});
				$('#submit_cancel').click();
			});
		});
	</script>